<template>

    <div>
        <!-- //顶部栏 -->
        <van-nav-bar title="编辑资料" left-arrow @click-left="$router.go(-1)"/>
        <!-- //图片盒子 -->
     <div class="avatar">
<van-image
  width="120"
  height="120"
   fit="cover"
   round
  :src="userInfo.photo"
/>
<van-uploader :after-read="afterRead" />
     </div>
<!-- 编辑cell -->
<van-cell-group>
  <van-cell title="名称" :value="userInfo.name"  is-link @click="showDialogClick"/>
  <van-cell title="性别" :value="userInfo.gender?'女':'男'  "  is-link @click="showPopup=true"/>
  <van-cell title="生日" :value="userInfo.birthday"  is-link  @click="datePickerClick"/>
</van-cell-group>

<!-- //编辑姓名弹窗 -->
<van-dialog v-model="showDialog" title="编辑姓名" show-cancel-button
@confirm="editName">
  <van-field ref="input" v-model="newName" placeholder="请输入名字" />
</van-dialog>

<!-- //编辑性别弹窗 -->
<!-- 修改性别 -->
<van-popup v-model="showPopup" position="bottom">
  <van-nav-bar
    title="修改性别"
    left-text="取消"
    left-arrow
    @click-left="showPopup = false"
  >
  </van-nav-bar>
  <van-cell is-link title="男" @click="editGender(0)" />
  <van-cell is-link title="女" @click="editGender(1)" />
</van-popup>

<!-- //编辑生日弹窗 -->
<van-popup v-model="showDatePicker" position="bottom">
<van-datetime-picker
  v-model="currentDate"
  type="date"
  title="选择年月日"
  :min-date="minDate"
  :max-date="maxDate"
  @cancel="showDatePicker=false"
  @confirm="editBirthday"
/>
</van-popup>
<!-- //裁切图片盒子 -->
<div class="cropper-box" v-show="showCropper">
<vueCropper
  ref="cropper"
  :img="img"
  autoCrop
  autoCropWidth="120px"
  autoCropHeight="120px"
></vueCropper>
<van-button  class="confirm" type="info" @click="submitPhoto">确认</van-button>
<van-button  class="cancel" type="primary" @click="showCropper=false">取消</van-button>
</div>
    </div>
</template>

<script>
//导入mapState辅助函数
import { mapState } from "vuex";
//导入接口
import { editUserInfo, editPhoto } from "./user.js";
// 导入moment.js
import * as moment from "moment";
//导入VueCropper组件
import { VueCropper } from "vue-cropper";
export default {
  name: "edit",
  data() {
    return {
      showDialog: false, //编辑姓名弹窗
      newName: "", //姓名输入框文本
      showPopup: false, //编辑性别弹窗
      showDatePicker: false,
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      img: null, //要裁切的图片
      showCropper: false //裁切盒子显示隐藏
    };
  },
  //注册组件
  components: {
    VueCropper
  },
  methods: {
    //1.点击编辑姓名按钮,弹出编辑姓名弹出
    showDialogClick() {
      //1.修改输入框文本,当前用户名字
      this.newName = this.userInfo.name;
      //2.弹出 弹框
      this.showDialog = true;
      //3.输入框自动聚焦
      this.$nextTick(() => {
        this.$refs.input.focus();
      });
    },
    //2.编辑姓名确认按钮,修改姓名
    editName() {
      console.log(this.newName);
      editUserInfo({ name: this.newName }).then(res => {
        console.log(res);
        //1.弹窗提示
        this.$toast.success("修改姓名成功");
        //2.更新vuex数据
        this.$store.commit("updateUserInfo", {
          ...this.userInfo, //先取出原先的属性铺开
          name: this.newName //在单独覆盖name属性
        });
      });
    },

    //3.编辑性别
    editGender(gender) {
      //1.发送请求
      editUserInfo({ gender }).then(res => {
        console.log(res);
        //2.隐藏popup弹窗
        this.showPopup = false;
        //3.弹出提示框
        this.$toast.success("修改性别成功");
        //4.更新vuex数据
        this.$store.commit("updateUserInfo", {
          ...this.userInfo,
          gender
        });
      });
    },
    //点击生日cell
    datePickerClick() {
      this.showDatePicker = true;
      let date = new Date(this.userInfo.birthday);
      this.currentDate = date;
    },
    //4.编辑生日
    editBirthday() {
      console.log(this.currentDate);
      // 转换日期格式
      let birthday = moment(this.currentDate).format("YYYY-MM-DD");
      console.log(birthday);
      //2.发送请求
      editUserInfo({ birthday }).then(res => {
        console.log(res);
        //3.弹出提示框
        this.$toast.success("修改生日成功");
        // //4.更新vuex数据
        this.$store.commit("updateUserInfo", {
          ...this.userInfo,
          birthday
        });
        //隐藏弹窗
        this.showDatePicker = false;
      });
    },
    // 5.编辑图片
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      //1.设置要裁切的图片
      this.img = file.content;
      //2.显示裁切盒子
      this.showCropper = true;
    },
    submitPhoto() {
      this.$refs.cropper.getCropBlob(data => {
        // console.log(data);
        //1.创建formData对象
        let fd = new FormData();
        fd.append("photo", data);
        //2.发送请求
        editPhoto(fd).then(res => {
          console.log(res);
          //3.弹窗提示
          this.$toast.success("更新头像成功");
          //关闭裁切窗口
          this.showCropper = false;
          //4.更新vuex数据
          this.$store.commit("updateUserInfo", {
            ...this.userInfo,
            photo: res.data.data.photo
          });
        });
      });
    }
  },
  computed: {
    //将vuex数据隐射成计算属性
    ...mapState(["userInfo"])
  }
};
</script>
<style lang="less">
.avatar {
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;

  .van-uploader {
    position: absolute;
    width: 120px;
    height: 120px;
    opacity: 0;
    .van-uploader__upload {
      width: 120px;
      height: 120px;
    }
  }
}

.cropper-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  .cancel {
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .confirm {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
</style>
